<template>
  <div class="tagspage-container">
    <TempPage>
      <template #main-left>
        <div class="main-left">
          <section class="main-left-header">
            <h1 class="main-left-title">标签 - {{ tagsCount }}</h1>
          </section>
          <section class="main-left-main">
            <article class="main-left-items">
              <el-button type="danger" size="small" @click="getHot">热门文章</el-button>
              <el-button type="primary" v-for="(item, index) in tagsData" :key="index" class="el_tag" size="small" @click="getTagArticle(item.tag_name)">
                {{ item.tag_name }}
              </el-button>
            </article>
          </section>
          <section class="main-left-main">
            <!-- 文章内容 -->
            <ArticleItems :articleInfo="articleInfo"></ArticleItems>
            <!-- 分页 -->
            <el-pagination class="pag" background layout="total, prev, pager, next" :page-count="pageCount" :page-size="pageSize" :total="pageTotal" :current-page="currentPage" @current-change="handleCurrentChange"> </el-pagination>
          </section>
          <el-divider></el-divider>
          <section class="main-left-footer">
            <!-- <Comment></Comment> -->
          </section>
        </div>
      </template>
      <template #aside>
        <div>
          <!-- 用户模块 -->
          <Aside class="login-module">
            <template #header>
              <div></div>
            </template>
            <template #main>
              <div>
                <keep-alive>
                  <component :is="comName" :newUserInfo="userInfo" @logoutInfo="getLogoutInfo" @shareNewInfo="getNewInfo"></component>
                </keep-alive>
              </div>
            </template>
            <template #footer>
              <div></div>
            </template>
          </Aside>
        </div>
      </template>

      <template #footer>
        <div></div>
      </template>
    </TempPage>
  </div>
</template>

<script>
import TempPage from '@/components/TempPage'
import UserModule from '@/components/UserModule'
import ArticleItems from '@/components/ArticleItems'
import Aside from '@/components/Aside'

export default {
  name: 'TagsPage',
  data () {
    return {
      tagsCount: 1,
      tagsData: [],
      articleInfo: [],
      nowTag: '',
      // 当前页数
      currentPage: 1,
      pageCount: 1,
      pageTotal: 1,
      pageSize: 10,
      userInfo: {},
      comName: 'UserModule'
    }
  },
  methods: {
    // 获取所有标签
    async getAllTag () {
      const res = await this.$api.getAllTags()
      this.tagsCount = res.data.data.tags.length
      // console.log(res)
      this.tagsData = res.data.data.tags
    },
    // 获取相关标签文章
    async getTagArticle (tag) {
      // console.log(tag)
      this.nowTag = tag
      const res = await this.$api.queryByTag({
        tag,
        page: 1
      })
      console.log(res)
      this.articleInfo = res.data.data
      for (let i = 0; i < this.articleInfo.length; i++) {
        this.articleInfo[i].created_time = this.$forMat(this.articleInfo[i].created_time)
        this.articleInfo[i].last_modified_time = this.$forMat(this.articleInfo[i].last_modified_time)
      }
      // 文章总数
      // this.articlesCount = res.data.count
      // 总页数
      this.pageCount = res.data.pagecount
      // 文章总条数
      this.pageTotal = res.data.count
      // 每页显示条数
      this.pageSize = res.data.pagesize
    },
    // 分页数改变触发
    async handleCurrentChange (val) {
      // console.log('val=' + val)
      const res = await this.$api.queryByTag({
        tag: this.nowTag,
        page: val
      })
      this.articleInfo = res.data.data
      for (let i = 0; i < this.articleInfo.length; i++) {
        this.articleInfo[i].created_time = this.$forMat(this.articleInfo[i].created_time)
        this.articleInfo[i].last_modified_time = this.$forMat(this.articleInfo[i].last_modified_time)
      }
      // 文章总数
      // this.articlesCount = res.data.count
      // 总页数
      this.pageCount = res.data.pagecount
      // 总条数
      this.pageTotal = res.data.count
      // 每页显示条数
      this.pageSize = res.data.pagesize
      // console.log(res)
    },
    async getHot () {
      const { data: res } = await this.$api.queryHot()
      console.log(res)
      this.articleInfo = res.data
      for (let i = 0; i < this.articleInfo.length; i++) {
        this.articleInfo[i].created_time = this.$forMat(this.articleInfo[i].created_time)
        this.articleInfo[i].last_modified_time = this.$forMat(this.articleInfo[i].last_modified_time)
      }
    },
    getNewInfo (val) {
      setTimeout(() => {
        this.comName = val.comName
      }, 100)
      this.newUserInfo = val.userInfo
      // console.log(val)
    },
    getLogoutInfo (val) {
      // console.log(val)
      setTimeout(() => {
        this.comName = val
      }, 100)
    }
  },
  created () {
    this.getAllTag()
    this.getHot()
  },
  components: {
    TempPage,
    UserModule,
    ArticleItems,
    Aside
  }
}
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  // height: 100%;
}
.tagspage-container {
  width: 100%;
  // height: 100%;
  background-image: -moz-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: -webkit-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
}
.page-main {
  display: flex;
  justify-content: center;
  // max-width: 1200px;
  width: 60%;
  // min-height: 500px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 50px 40px;
}
.main-left {
  // margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 50px 40px;
}
.main-left-main {
  margin-top: 20px;
}
.main-left-title {
  text-align: center;
  font-size: 20px;
}
.main-left-items {
  margin-top: 30px;
}
.el_tag {
  margin-right: 20px;
  margin: 5px;
}
.main-left-footer {
  margin-top: 20px;
}
.login-module {
  display: flex;
  flex-direction: column;
  padding: 20px 15px;
  margin-bottom: 15px;
}
</style>
